<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- HTML元素 -->
    <div id = "test">测试案例1</div>
    <p>测试案例2</p>
    <p>测试案例3</p>
    <div class="c1">测试案例4</div>
    <div class = "c2">测试案例5</div>
    <div id = "c3">测试案例6</div>
    <div id = "c3">测试案例7</div>
    
    <script>
        //1 通过ID找元素，注意ID大小写敏感，返回值为
        var test1 = document.getElementById('test');
        console.log(test1);
        console.dir(test1);//等同于log,用于查看元素结构
        
        //2 通过标签名找元素，这种方式选中所有同名标签，返回值为伪数组
        var test2 = document.getElementsByTagName('p');
        console.log(test2);

        //3 通过类名找元素，该方法仅支持IE9以上，返回值为伪数组
        var test3 = document.getElementsByClassName('c1');
        console.log(test3);
        
        //4 通过选择器查找第一个元素
        var test4 = document.querySelector('.c2');
        console.log(test4);
        
        //5 通过选择器选定所有元素
        var test5 = document.querySelectorAll('#c3');
        console.log(test5);
        var test6 = document.querySelectorAll('*');
        console.log(test6);
        
        //6 得到body元素
        var test7 = document.body;
        console.log(test7);

        //7 得到html元素
        var test8 = document.documentElement;
        console.log(test8);
    </script>
</body>
</html>